import * as React from "react";
import { Image, Text, View } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import  MovieStackScreen from'./components/MovieStackScreen';



const FoodStackScreen=()=>{
  return(
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' ,backgroundColor:'#ccc'}}>
        <Text>美食</Text>
    </View>
  )
};

// const MovieStackScreen=()=>{
//   return(
//     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' ,backgroundColor:'#61ce70'}}>
//       <Text>电影</Text>
//     </View>
//   )
// };
const HotelStackScreen=()=>{
  return(
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' ,backgroundColor:'#1498d4'}}>
      <Text>酒店</Text>
    </View>
  )
};
const BankStackScreen=()=>{
  return(
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' ,backgroundColor:'#ec930a'}}>
      <Text>银行</Text>
    </View>
  )
};

const Tab = createBottomTabNavigator();
class App extends React.Component{
  render(){
    return(
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;

              if (route.name === '美食') {
                iconName = focused
                  ? (<Image source={require('./img/zzc.png')} style={{width:25,height:25}}/>)
                  : (<Image source={require('./img/icon_food.png')} style={{width:25,height:25}}/>);
              } else if (route.name === '电影') {
                iconName = focused
                  ? (<Image source={require('./img/dy.png')} style={{width:25,height:25}}/>)
                  : (<Image source={require('./img/icon_movie.png')} style={{width:25,height:25}}/>);
              }
              else if (route.name === '酒店') {
                iconName = focused
                  ? (<Image source={require('./img/jd.png')} style={{width:25,height:25}}/>)
                  : (<Image source={require('./img/icon_hotel.png')} style={{width:25,height:25}}/>);
              }
              else if (route.name === '银行') {
                iconName = focused
                  ? (<Image source={require('./img/jdmp.png')} style={{width:25,height:25}}/>)
                  : (<Image source={require('./img/icon_bank.png')} style={{width:25,height:25}}/>);
              }
              return iconName;
            }
          })}
          tabBarOptions={{
            activeTintColor: '#07B5D1',
            inactiveTintColor: 'gray',
            style:{
              backgroundColor:'#eee'
            }
          }}
        >
          <Tab.Screen name="美食" component={FoodStackScreen} />
          <Tab.Screen name="电影" component={MovieStackScreen} />
          <Tab.Screen name="酒店" component={HotelStackScreen} />
          <Tab.Screen name="银行" component={BankStackScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    )
  }


}



export default App;
